<template>
	<view class="content">
		<u--form labelPosition="left" labelWidth="65%" :model="model" :rules="rules" errorType="toast" ref="uForm">
			<u-form-item class="item">
				<view class="item-left">昵称</view>
				<view class="item-right">
					<u-input type="nickname" disabledColor="#fff" v-model="model.nickName" placeholder="获取昵称"
						@blur="onNicknameInput" border="none" input-align="right" />
					<view class="rightIcon">
						<u-icon class="rightIcon" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
					</view>
				</view>
			</u-form-item>
			<view class="sub">
				<button @click="handleSave">保存</button>
			</view>
		</u--form>
	</view>
</template>

<script>
	import {
		onMounted,
		reactive,
		toRefs,
		ref
	} from 'vue'
	import {
		request,
		requestData
	} from '@/utils/http.js'

	export default {
		data() {
			return {
				user_id: null,
				model: {
					nickName: '',
				},
				rules: {
					nickName: [{
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change'],
					}, ],
				},
			}
		},
		onLoad() {
			this.initUesrInfo() //初始info
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			initUesrInfo() {
				request('/user/info/get', {})
					.then((res) => {
						this.model = {
							...this.model,
							...{
								nickName: res?.datas?.nick_name || '',
							},
						}
					})
					.catch((err) => {
						console.log(err)
					})
			},

			// 表单提交
			handleSave() {
				let user_id = uni.getStorageSync('user_id')
				if (!user_id) {
					uni.showToast({
						title: '请先绑定手机号',
						icon: 'none',
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/loginPhone/loginPhone',
						})
					}, 1000)
				} else {
					console.log(this.$refs.uForm)
					this.$refs.uForm
						.validate()
						.then((res) => {
							console.log(res)
							request('/user/info/update', {
									nick_name: this.model.nickName,
								})
								.then(res => {
									if (res.code == 0) {
										uni.$u.toast('保存成功')
										this.initUesrInfo()
										uni.setStorageSync('nickName', res?.datas?.nick_name)
									} else {
										uni.$u.toast('保存失败')
									}

								})
								.catch((err) => {
									console.log(err)
								})
						})
						.catch((errors) => {
							//uni.$u.toast('校验失败')
						})
				}
			},

			//昵称
			async onNicknameInput(val) {

				this.model.nickName = val
				uni.setStorageSync('nickName', val || '')
			},
		},
	}
</script>

<style lang="scss" scoped>
	/* 更改form样式
	https://gitcode.csdn.net/65ec454d1a836825ed795f5b.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6NTIxMDQ4LCJleHAiOjE3MjQwNTQxMzUsImlhdCI6MTcyMzQ0OTMzNSwidXNlcm5hbWUiOiJxcV8zMzMzMjE4NCJ9.oGTHEemmtk-LQyb8Q8wT6vnYMGpHcw0g2D1P3RXuFXE
	 */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #f7f7f8;
		// background: #f8f8f8;
	}

	.vue-ref {
		width: 100%;
	}

	.u-form {
		width: 100%;
		height: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	::v-deep .u-form-item {
		width: 100% !important;
		height: 100% !important;
		box-sizing: border-box !important;
		font-size: 32rpx !important;
		// background: red !important;
	}

	::v-deep .u-form .u-form-item__body__right {
		flex-direction: row !important;
	}

	::v-deep .u-form-item__body__right__content__slot {
		flex-direction: row !important;
		width: 100%;
	}

	::v-deep .u-form-item__body__right_no_flex {
		width: 100% !important;
		height: 100% !important;
	}

	::v-deep .u-form-item__body {
		padding: 0 !important;
		height: 100% !important;
	}

	.item {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 100rpx;
		background: #fff;
		border-bottom: 1px solid #f5f5f0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.item-left {
			width: 30%;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			// font-size: 28rpx;
		}

		.item-right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 14rpx;
		}
	}

	.right-txt {}

	.rightIcon {
		margin-left: 20rpx;
	}

	.right-pic {
		width: 60rpx;
		height: 60rpx;
		display: block;
		margin-right: 10rpx;
	}

	.avatarUrl {
		border-radius: 50%;
	}

	.avatar-wrapper {
		padding: 0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
	}

	.avatar {
		display: block;
		width: 100%;
		height: 100%;
	}

	.container {
		display: flex;
	}

	.u-form-item__body__right__message {
		margin-left: 0;
	}

	::v-deep .u-button--info {
		background: $global-color-golden !important;
		width: 130rpx !important;
		z-index: 999;
		color: #fff !important;
		// border-radius: 20rpx !important;
	}

	::v-deep .u-form-item__body__left__content__label {
		font-size: 32rpx !important;
	}

	.sub {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.sub button {
		border: none;
		width: 90%;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		color: #533504;
		background: linear-gradient(to right, #c8a357, #fbde94, #c8a357);
	}

	::v-deep .u-form-item__body__right__message {
		margin-left: 20rpx !important;
	}

	button::after {
		border: none;
	}
</style>